<template>
  <BasicLayout title="提交订单">
    <template slot="content">
      <el-card class="card">
        <div class="card-title" slot="header">填写订单信息</div>
        <OrderForm />
      </el-card>
      <el-card class="card">
        <div class="card-title" slot="header">我的购物车</div>
        <OrderList />
      </el-card>
      <ClauseCheckbox clause="用户服务条款" />
    </template>
    <ShoppingCar slot="footer" ref="shopping" @commit="commit" />
  </BasicLayout>
</template>

<script>
import BasicLayout from "@/components/BasicLayout/index.vue";
import ShoppingCar from "@/components/ShoppingCar/index.vue";
import ClauseCheckbox from "@/components/ClauseCheckbox/index.vue";
import OrderForm from "./OrderForm.vue";
import OrderList from "./OrderList.vue";
export default {
  components: {
    BasicLayout,
    ShoppingCar,
    OrderForm,
    OrderList,
    ClauseCheckbox,
  },
  data() {
    return {
      checkbox: false,
    };
  },
  methods: {
    commit() {
      const loading = this.$loading({
        lock: true,
        text: "正在提交订单中",
        spinner: "el-icon-loading",
      });
      setTimeout(() => {
        loading.close();
        this.$router.push({ name: "OrderStatus", query: { type: "person" } });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.card {
  margin: 1em auto;
  border-radius: 10px;
}
.card-title {
  font-size: 1.2em;
}
.card >>> .el-card__body {
  padding: 0.5em;
}
</style>
